<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mdict单词库</title>
    <link rel="stylesheet" type="text/css" href="js/antd/antd.css"/>
    <script src="/js/vuejs/vue.min.js"></script>
    <script src="/js/antd/antd.min.js"></script>
    <script src="/js/vuejs/axios.min.js"></script>
    <script src="/js/common.js"></script>
</head>
<style>
    #components-layout-fixed .logo {
        float: left;
    }

    .ant-layout-header {
        background: #ffffff !important;
    }

    .ant-layout-sider {
        background-color: #f0f2f5 !important;
        border-right: 1px solid #e7e0e0;
    }

    body {
        background-color: #f0f2f5;
    }

    .menu {
        text-align: left;
    }

    .menu a {
        font-size: 14px;
        padding: 8px 5px;
        color: rgba(0, 0, 0, 0.65);
    }

    .menu.active a {
        font-weight: bolder;
        color: #1890ff;
    }

    .menu a:hover {
        color: #1890ff;
    }

    .ant-layout-footer {
        padding: 0px 50px 20px 50px;
    }
    .word-content img{
        display: none;
    }
    .word-content span{
        display: block;
    }
    .title{
        font-size: 24px;
        font-family: cursive;
        text-align: right;
    }
</style>
<body>
<div id="mainDiv">
    <a-layout class="layout" id="components-layout-fixed">
        <a-layout-content style="padding: 0 350px;min-height: 550px;">
            <a-layout style="padding: 24px 0;">
                <div class="title">Mdict单词库</div>
                <a-textarea
                        v-model="word"
                        placeholder="输入要查询的单词"
                        :auto-size="{ minRows: 3, maxRows: 5 }" @pressEnter="search"></a-textarea>
                <a-button type="primary" @click="search" style="margin-top: 5px">
                    翻译
                </a-button
            </a-layout>
            <a-layout style="padding: 24px 0;">
                <a-layout-sider width="145">
                    <div class="menu" :class="index == curIndex ? 'active': ''" v-for="(data, index) in dataList"
                         @click="show(index)">
                        <a>
                            <a-icon style="fontSize: 16px" type="ant-cloud"></a-icon>
                            {{data.name}}</a>
                    </div>
                </a-layout-sider>
                <a-layout-content style="padding: 0px 20px">
                    <div class="word-content" v-html="curContent"></div>
                </a-layout-content>
            </a-layout>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
            Mdict单词库 ©2025 Created by Lei Yuan
        </a-layout-footer>
    </a-layout>
</div>
</body>
</html>
<script>
    (function () {
        new Vue({
            el: "#mainDiv",
            data: {
                word: "",
                curContent: "",
                curIndex: 0,
                dataList: []
            },
            methods: {
                show(index) {
                    this.curContent = this.dataList[index].html
                    this.curIndex = index
                },
                search() {
                    let me = this
                    axios.get("/mdict-server/translate?word=" + this.word).then(res => {
                        console.log(res);
                        me.dataList = res.data.data;
                        if(me.dataList != null && me.dataList.length > 0){
                            me.show(0)
                        }else{
                            me.curContent = "没有找到该单词"
                        }
                    });
                },
            },
        })
    })();

</script>
